<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%>
<!DOCTYPE html>
<html>

<head>
    <%@ include file="/include/head.jsp"%>
    <title>注册</title>
    <link rel="stylesheet" href="${rootPath}/static/css/webwiew.css">
    <style type="text/css">
        .publicBtn{
            border-radius: 60px;
            margin-top: 60px;
        }
        .border-bottom-black{
            border-color: #555555;
        }

    </style>
    <script src="${rootPath}/static/plugins/swiper/swiper-3.4.2.jquery.min.js"></script>
    <script src="${rootPath}/static/js/mui.view.js" type="text/javascript"></script>
    <script src="${rootPath}/static/js/register.js" type="text/javascript"></script>
    <script>
        mui.init();
        //页面基础配置
        $(function(){
            //初始化单页view
            var viewApi = mui('#app').view({
                defaultPage: '#mainPage'
            });
            // 初始化单页view相关事件处理
            var view = viewApi.view;
            (function($,$$) {
                //处理view的后退与webview后退
                var oldBack = $.back;
                $.back = function() {
                    if (viewApi.canBack()) { //如果view可以后退，则执行view的后退
                        viewApi.back();
                    } else { //执行webview后退
                        oldBack();
                    }
                };
                //监听页面切换事件方案1,通过view元素监听所有页面切换事件，目前提供pageBeforeShow|pageShow|pageBeforeBack|pageBack四种事件(before事件为动画开始前触发)
                //第一个参数为事件名称，第二个参数为事件回调，其中e.detail.page为当前页面的html对象
                view.addEventListener('pageBeforeShow', function(e) {
                    //				console.log(e.detail.page.id + ' beforeShow');
                });
                view.addEventListener('pageShow', function(e) {
                    //				console.log(e.detail.page.id + ' show');
                });
                view.addEventListener('pageBeforeBack', function(e) {
                    //				console.log(e.detail.page.id + ' beforeBack');
                });
                view.addEventListener('pageBack', function(e) {
                    //				console.log(e.detail.page.id + ' back');
                });
            })(mui,$);
            //初始化注册
            initRegister();

        });


    </script>

</head>

<body  class="mui-fullscreen">
<!--页面主结构开始-->
<div id="app" class="mui-views qy-bg-white">
    <div class="mui-view qy-bg-white">
        <div class="mui-navbar">
        </div>
        <div class="mui-pages qy-bg-white">
        </div>
    </div>
</div>
<!--页面主结构结束-->
<!--单页面开始-->
<div id="mainPage" class="mui-page qy-bg-white">
    <!--页面标题栏开始-->
    <div class="mui-navbar-inner mui-bar mui-bar-nav qy-bg-white">
        <button type="button" class="mui-left mui-action-back mui-btn  mui-btn-link mui-btn-nav mui-pull-left qy-text-black">
            <span class="mui-icon mui-icon-left-nav"></span>
        </button>
        <h1 class="mui-center mui-title">注册</h1>
    </div>
    <!--页面标题栏结束-->
    <!--页面主内容区开始-->
    <div class="mui-page-content qy-bg-white">
        <div id="mainBox" class="qy-padding-vertical-30px qy-margin-top-16px">
            <div class="qy-margin-bottom-16px">
                <span>手机号注册</span>
            </div>
            <small class="qy-text-label mui-block">手机号</small>
            <div :class="{'border-bottom-black':registerTypeOnePhone.length>0}" class="qy-border-bottom qy-flex qy-flex-fullHeight qy-flex-text-between">
                <div class="mui-col-xs-10">
                    <input v-model="registerTypeOnePhone" type="text" class="qy-no-margin qy-no-padding qy-no-border qy-bg-white">
                </div>
                <div class="qy-flex mui-col-xs-2 qy-flex-text-right">
                    <span v-if="registerTypeOnePhone.length>0" v-on:click="clearTxt" class="mui-icon mui-icon-close-filled qy-font-size-20px"></span>
                </div>
            </div>
            <small class="qy-margin-top-16px mui-block qy-text-label">验证码</small>
            <div class="qy-border-bottom qy-flex qy-flex-fullHeight qy-flex-text-between">
                <div class="mui-col-xs-9">
                    <input type="text" class="qy-no-margin qy-no-padding qy-no-border qy-bg-white">
                </div>
                <div class="qy-flex mui-col-xs-3 qy-flex-text-right">
                    <small v-on:click="getRegisterCode" class="qy-text-label">{{getCodeBtnTxt}}</small>
                </div>
            </div>
            <div class="qy-flex qy-margin-top-4px">
                <div class="mui-checkbox qy-margin-right-4px">
                    <input v-on:click="checkProtocol" v-bind="{'checked':isCheckProtocol}" name="checkbox" value="" type="checkbox">
                </div>
                <small>我已确认阅读并同意<a href="">《用户服务协议》</a></small>
            </div>
            <a v-if="isCheckProtocol&&registerTypeOnePhone.length>0" href="#account" class="qy-bg-blue publicBtn qy-padding-horizontal-12px qy-text-white qy-font-size-16px qy-flex qy-flex-text-center">
                下一步
            </a>
            <div v-else class="qy-bg-default publicBtn qy-padding-horizontal-12px qy-text-white qy-font-size-16px qy-flex qy-flex-text-center">
                下一步
            </div>
        </div>
    </div>
    <!--页面主内容区结束-->
</div>
<!--单页面结束-->
<div id="account" class="mui-page qy-bg-white">
    <div class="mui-navbar-inner mui-bar mui-bar-nav">
        <span class="mui-left mui-action-back mui-pull-left mui-icon mui-icon-left-nav"></span>
        <h1 class="mui-title" style="position: absolute;margin: 0 !important;">注册</h1>
    </div>
    <div class="mui-page-content qy-bg-white">
        <div id="mainBox2" class="qy-padding-vertical-30px qy-margin-top-16px">
            <div class="qy-margin-bottom-16px">
                <span>设置登录密码</span>
            </div>
            <small class="qy-text-label mui-block">密码</small>
            <div :class="{'border-bottom-black':registerPassword.length>0}" class="qy-border-bottom qy-flex qy-flex-fullHeight qy-flex-text-between">
                <div class="mui-col-xs-10">
                    <input  v-if="!registerPasswordShow" v-model="registerPassword" type="password" class="qy-no-margin qy-no-padding qy-no-border qy-bg-white">
                    <input  v-else v-model="registerPassword"  type="text" class="qy-no-margin qy-no-padding qy-no-border qy-bg-white">
                </div>
                <div class="qy-flex mui-col-xs-2 qy-flex-text-right">
                    <img v-if="registerPasswordShow" v-on:click="setShow(0)" src="${rootPath}/static/imgs/openEyes.png" style="width: 20px;" alt="">
                    <img v-else v-on:click="setShow(0)" src="${rootPath}/static/imgs/closeEyes.png" style="width: 20px;" alt="">
                </div>
            </div>
            <small class="qy-margin-top-16px mui-block qy-text-label">确认密码</small>
            <div :class="{'border-bottom-black':registerPasswordCheck.length>0}" class="qy-border-bottom qy-flex qy-flex-fullHeight qy-flex-text-between">
                <div class="mui-col-xs-10">
                    <input  v-if="!registerPasswordCheckShow" v-model="registerPasswordCheck" type="password" class="qy-no-margin qy-no-padding qy-no-border qy-bg-white">
                    <input  v-else v-model="registerPasswordCheck"  type="text" class="qy-no-margin qy-no-padding qy-no-border qy-bg-white">
                </div>
                <div class="qy-flex mui-col-xs-2 qy-flex-text-right">
                    <img v-if="registerPasswordCheckShow" v-on:click="setShow(1)" src="${rootPath}/static/imgs/openEyes.png" style="width: 20px;" alt="">
                    <img v-else v-on:click="setShow(1)" src="${rootPath}/static/imgs/closeEyes.png" style="width: 20px;" alt="">
                </div>
            </div>
            <div v-if="(registerPasswordCheck==registerPassword)&&registerPasswordCheck.length>0" class="qy-bg-blue publicBtn qy-padding-horizontal-12px qy-text-white qy-font-size-16px qy-flex qy-flex-text-center">
                确认
            </div>
            <div v-else class="qy-bg-default publicBtn qy-padding-horizontal-12px qy-text-white qy-font-size-16px qy-flex qy-flex-text-center">
                确认
            </div>
        </div>
    </div>
</div>
</body>

</html>